import React, { useState, useContext, useEffect, createElement } from 'react'
import { Table, PageHeader, Button, Descriptions, Image } from 'antd'
import utils from '@utils'
import CancelOrderModal from './cancelOrder'
import Share from './share'
import CreateModal from '@utils/create'
import css from './index.scss'

export default props => {
  let [list, setList] = useState([])
  let [order, setOrder] = useState({})
  let [isShowCancelOrderModal, setIsShowCancelOrderModal] = useState(false)
  let orderId = utils.getQueryString('orderId')
  let buyerId = utils.getQueryString('buyerId')
  let [totalPrices, setTotalPrices] = useState(0)
  useEffect(() => {
    getDetail()
  }, [])
  const getDetail = () => {
    utils.get('/api/order/detail', {
      orderId: orderId,
      buyerId: buyerId,
      showMsg: false,
    }).then(({ result, errorCode }) => {
      if (errorCode == 0) {
        setOrder({ ...result })
        setList([...result.goods])
        if (result.goods && result.goods.length > 0) {
          let a = result.goods.reduce((count, item) => {
            count = count + item[result.orderType == 1 ? 'price' : 'marketPrice'] * item.quantity
            return count;
          }, 0)
          setTotalPrices(a)
        }
      }
    })
  }
  const columns = [
    {
      title: '商品图片',
      dataIndex: 'imgUrl',
      key: 'imgUrl',
      render: (text) => {
        return text ? <Image src={text} width={50} height={50} /> : null
      },
    },
    {
      title: '商品名称',
      dataIndex: 'goodsName',
      key: 'goodsName',
    },
    {
      title: '规格',
      dataIndex: 'skuValue',
      key: 'skuValue',
    },
    (order.orderType == 2 ? {
      title: '兑换积分',
      dataIndex: 'price',
      key: 'price',
      className: 'notShow'
    } : {})
    ,
    {
      title: '商品单价',
      dataIndex: order.orderType == 1 ? 'price' : 'marketPrice',
      key: order.orderType == 1 ? 'price' : 'marketPrice',
      render: (text) => {
        return text ? '￥' + text : ''
      },
    },
    {
      title: '数量',
      dataIndex: 'quantity',
      key: 'quantity',
    },
    {
      title: '小计',
      dataIndex: 'lineAmount',
      key: 'lineAmount',
      render: (text, rec) => {
        return '￥' + rec[order.orderType == 1 ? 'price' : 'marketPrice'] * rec.quantity
      },
    },
  ]
  return <div>
    <PageHeader
      onBack={() => props.history.goBack()}
      title={'当前订单状态：' + (order.statusText || '')}
      extra={[
        // orderType  1普通商品订单  2积分兑换订单!!!!
        // 普通商品订单暂时不支持在后台取消订单
        order.orderType == 2 && order.orderStatus == 2 ? <Button key={1} onClick={() =>{
          CreateModal.show(CancelOrderModal,{
            title:'取消订单',
            params: {
              orderType: order.orderType || '',
              orderCode: order.orderCode || '',
              integral: order.totalMoney || '',
            },
            onOk:getDetail
          })
        }}>取消订单</Button> : null
      ]}
    />

    <Descriptions title="订单处理时间" size="small" layout="vertical" bordered column={5} className={css.Descriptions}>
      <Descriptions.Item label="提交订单">{order.createDt}</Descriptions.Item>
      <Descriptions.Item label="订单支付">{order.payDt}</Descriptions.Item>
      <Descriptions.Item label="订单发货">{order.shipDt}</Descriptions.Item>
      <Descriptions.Item label="订单确认收货">{order.deliveryDt}</Descriptions.Item>
      <Descriptions.Item label="关闭售后"></Descriptions.Item>
    </Descriptions>

    <Descriptions title="订单基本信息" size="small" layout="vertical" bordered column={6} className={css.Descriptions} extra={<>
      {!order.sharerPhone&&<Button onClick={()=>{
        CreateModal.show(Share,{
          params:{
            orderCode:order.orderCode
          },
          onOk:getDetail
        })
      }}>增加分享人</Button>}
    </>}>
      <Descriptions.Item label="订单编号">{order.orderCode}</Descriptions.Item>
      <Descriptions.Item label="买家手机号">{order.buyerPhone}</Descriptions.Item>
      <Descriptions.Item label="买家昵称">{order.buyerName}</Descriptions.Item>
      <Descriptions.Item label="支付方式">{`${order.orderType == 1 ? '微信支付' : (order.orderType == 2 ? '积分兑换' : '')}`}</Descriptions.Item>
      <Descriptions.Item label="物流单号">{`${order.orderCode ? (order.shipDt ? order.expressName + order.expressCode : '未发货') : ''}`}</Descriptions.Item>
      <Descriptions.Item label="订单类型">{`${order.orderType == 1 ? '普通商品' : (order.orderType == 2 ? '积分兑换' : '')}`}</Descriptions.Item>
      <Descriptions.Item label="分享人手机号">{order.sharerPhone}</Descriptions.Item>
      <Descriptions.Item label="分享人昵称">{order.sharerName}</Descriptions.Item>
      <Descriptions.Item label="买家备注">{order.buyerRemark}</Descriptions.Item>
      <Descriptions.Item label="待发货订单备注">{order.sellerRemark}</Descriptions.Item>
    </Descriptions>
    
    {/* <Descriptions title="SCRM同步信息" size="small" layout="vertical" bordered column={3} className={css.Descriptions}>
      <Descriptions.Item label="同步订单号">{order.dustessOrderId}</Descriptions.Item>
      <Descriptions.Item label="同步日期">{order.dustessSyncDt}</Descriptions.Item>
      <Descriptions.Item label="同步失败原因">{order.dustessFailMsg}</Descriptions.Item>
    </Descriptions> */}

    <Descriptions title="收货人信息" size="small" layout="vertical" bordered column={3} className={css.Descriptions}>
      <Descriptions.Item label="收货人姓名">{order.contact}</Descriptions.Item>
      <Descriptions.Item label="收货人手机号">{order.phone}</Descriptions.Item>
      <Descriptions.Item label="收货地址">{order.province}{order.city}{order.area}{order.town}{order.address}</Descriptions.Item>
    </Descriptions>

    <Descriptions title="商品信息" layout="vertical" size="small" className={css.Descriptions}> 
    </Descriptions>
    <Table
      columns={columns}
      bordered
      size={"small"}
      rowKey={'orderId'}
      dataSource={list}
      pagination={false}
      footer={() => {
        if (list.length == 0) return null
        return <div style={{ textAlign: 'right' }}>合计：{totalPrices ? '￥' + totalPrices : ''}</div>
      }}
    />

    <Descriptions title="费用信息" size="small" layout="vertical" bordered column={5} className={css.Descriptions}>
      <Descriptions.Item label="商品合计">{totalPrices ? '￥' + totalPrices : ''}</Descriptions.Item>
      <Descriptions.Item label="运费">￥{order.freight || 0}</Descriptions.Item>
      {
        order.orderType == 2 ? <Descriptions.Item label="积分抵扣">{totalPrices ? '-￥' + totalPrices : ''}({order.totalMoney}积分)</Descriptions.Item> : null
      }
      {
        order.orderType == 1 ? <Descriptions.Item label="优惠券">-￥{order.couponAmount ? order.couponAmount : 0}</Descriptions.Item> : null
      }
      <Descriptions.Item label="订单总额">{totalPrices ? '￥' + (totalPrices + (order.freight || 0)) : ''}</Descriptions.Item>
      <Descriptions.Item label="应付款金额">￥{order.orderType == 1 ? order.totalMoney : 0}</Descriptions.Item>
    </Descriptions>
  </div>
}
